<!-- 个人中心 -->
<template>
    <div class="user-center">
        <div :class="['user-box',{'isteacher':type==1}]">
            <!-- 用户 -->
            <div class="user-info">
                <img :src="user.Avatar ? user.Avatar : $parent.headError" alt="" :onerror="$parent.headError" class="user-avatar">
                <h4>{{user.TrueName}}</h4>
                <p>
                    <span v-if="user.classJson">{{user.classJson[0].name}}</span>
                    <i v-show="user.classJson && user.SchoolName">·</i>
                    <span>{{user.SchoolName}}</span>
                </p>
            </div>
            <!-- 阅读情况 -->
            <ul class="user-read" v-if="type==0">
                <li>
                    <em>{{totalTime > 9999 ? 9999 : totalTime}}</em>
                    <span>累计分钟</span>
                </li>
                <li>
                    <em>{{totalNum}}</em>
                    <span>阅读书籍</span>
                </li>
                <!--<li>
                    <em>{{totalScore}}</em>
                    <span>我的积分</span>
                </li>-->
            </ul>
            <div class="grade" v-if="type==0">
                <div class="grade-num clearfix">
                    <span class="left grade-now">LV{{gradeNum}}</span>
                    <div class="in-progress left" ref="in-progress">
                        <div class="in-elapse" ref="in-elapse" :style="'width:'+ inElapsePDay +'%;'"></div>
                    </div> 
                    <span class="left">{{ gradeNum >19 ? '满级' : 'LV'+(gradeNum+1)}}</span>
                </div>
                <p>{{totalScore}}/{{ gradeScore}}分</p>
            </div>
        </div>
        <!-- 相关入口 -->
        <ul class="user-mod">
            <router-link :to="{path:'/reportStu'}">
                <li class="user-report" v-if="type==0">阅读报告<span></span></li>
            </router-link>
            <router-link :to="{path:'/reviewList',query: {userid:user.UserId}}">
                <li class="user-review" v-if="type==0">我的读后感<span></span></li>
            </router-link>
            <router-link :to="{path:'/roles'}">
                <li class="user-tab">切换账号<span></span></li>
            </router-link>
            <li class="user-guide" @click="goGuide()">新手引导<span></span></li>
            <router-link :to="{path:'/statistic'}">
                <li class="user-statistic" v-if="type==1">详细统计<span></span></li>
            </router-link>
            <router-link :to="{path:'/buybook'}">
                <li class="user-buybook">购买书券<span></span></li>
            </router-link>
            <!--<router-link :to="{path:'/reset',query: {}}">
                <li class="user-set">修改密码<span></span></li>
            </router-link>-->
        </ul>
        <div class="btn-logout" @click="goLogin()">退出</div>
    </div>
</template>

<script>
import { axGet } from '@/api/index'

export default {
    name: "userCenter",
    data(){
        return{
            type:this.$parent.myInfo.UserType,//0学生，1教师
            user:this.$parent.myInfo,  //用户信息
            totalTime:0,        //阅读时间
            totalNum:0,         //阅读数量
            totalScore:0,       //积分
            gradeNum:0,
            score:0,
            gradeScore:0,
            gradeScoreList:[50,200,400,600,800,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200,3400,4000],
            inElapsePDay:0,
        }
    },
    watch:{
        
    },
    computed: {
     
    },
    created(){ 
        this.$parent.menuShow=true;
        this.$parent.menuChose=3;
        
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            if(this.type==0){
                this.getUserData()
                this.getUserScore()
            }
        }
    },
    mounted(){
        
    },
    destroyed(){
        this.$parent.popupShow=false
    },
    methods:{
        // 退出登录
        goLogin(){
            this.$parent.popupShow=true
            this.$parent.popupType=2
            this.$parent.popupText='确定要退出账号吗？'
            this.$parent.popupSure=()=>{
                sessionStorage.setItem("myInfo",'')
                sessionStorage.setItem("rolesList",'')
                this.$parent.popupShow=false
                this.$router.push({path:'/',query: {}});
            }
        },
        // 阅读数据
        getUserData(){
            axGet('GetUserData', {
                userId: this.user.UserId,
            }).then(res => {
                if(res.ResultCode==1){
                    this.totalTime=this.clockTime=Math.floor(res.Value.MinuteSum%3600/60);
                    this.totalNum=res.Value.BookCount
                }
            })
        },
        // 用户积分
        getUserScore(){
            axGet('GetUserIntegralSUM', {
                userId: this.user.UserId,
            }).then(res => {
                if(res.ResultCode==1){
                    this.totalScore=res.Value
                    if(this.totalScore<4000){//没满级
                        let i=this.gradeScoreList.findIndex(item => this.totalScore<item)
                        this.gradeNum=i+1 
                        this.gradeScore=this.gradeScoreList[i]
                        let score=0
                        let gradeScore=0
                        if(i == 0){
                            score=this.totalScore
                            gradeScore=this.gradeScoreList[0]
                        }else{
                            score=this.totalScore-this.gradeScoreList[i-1]
                            gradeScore=this.gradeScoreList[i]-this.gradeScoreList[i-1]
                        }
                        this.inElapsePDay=score/gradeScore*100
                    }else{
                        this.gradeNum=20
                        this.gradeScore=4000
                        this.inElapsePDay=100
                    }
                }
            })
        },
        goGuide(){
            localStorage.setItem("hasGuide"+this.type,0)
            // this.$parent.guideShow=true
            this.$router.push({path:'/bookshelf',query: {}});
        },
    }
}
</script>
<style type="text/css" scoped>
    .user-center{
        background: #fff url('~@/assets/img/main/user-bg.png') no-repeat 0 0;
        background-size: 100% auto;
        padding: 1.52rem 0 1.5rem;
        width: 100%;
        height: 70%;
        overflow: scroll;
    }
    .user-box{
        width: 6.86rem;
        box-sizing: border-box;
        /* padding: 0.56rem 0.48rem; */
        background: #fff;
        border-radius: 0.34rem;
        box-shadow:0 0 0.5rem rgba(59,100,168,0.15);
        -webkit-box-shadow:0 0 0.5rem rgba(59,100,168,0.15);
        margin: 0 auto;
        position: relative;
    }
    .user-box.isteacher{
        padding: 0.04rem 0 0.9rem;
    }
    .user-avatar{
        width: 1.38rem;
        height: 1.38rem;
        border: 0.2rem solid #fff;
        border-radius: 50%;
        position: absolute;
        top: -0.89rem;
        left: 50%;
        margin-left: -0.89rem;
        background: #fff;
    }
    .user-info{
        text-align: center;
    }
    .user-info h4{
        font-size: 0.44rem;
        font-weight: bold;
        line-height: 1;
        padding: 1.18rem 0 0.26rem;
    }
    .user-info p{
        color: #666;
        font-size: 0.26rem;
        white-space:nowrap; 
        overflow: hidden;
        text-overflow:ellipsis;
    }
    .user-class{
        background: #e5f7ff;
        color: #02affe;
    }
    .user-school{
        background: #fff4e5;
        color: #ff9600;
    }
    .user-read{
        display:-webkit-box;  
        display:-webkit-flex; 
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .user-read li{
        /* float: left; */
        width: 2rem;
        text-align: center;
        padding-top: 0.54rem;
    }
    .user-read em{
        display: block;
        font-size: 0.36rem;
        font-weight: bold;
        height: 0.6rem;
        line-height: 0.6rem;
    }
    .user-read span{
        display: block;
        color: #999;
        font-size: 0.26rem;
        border-right:1px solid #e0e0e0;
    }
    .user-read li:last-child span{
        border: 0;
    }
    .user-mod{
        padding: 0.66rem 0.56rem 0.3rem;
    }
    .user-mod li{
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.34rem;
        color: #000;
        padding-left: 0.86rem;
        margin-bottom: 0.6rem;
        position: relative;
        background: no-repeat 0 center;
    }
    .user-mod li.user-report{
        background-image: url('~@/assets/img/icon/report.png');
        background-size: 0.44rem 0.46rem;
    }
    .user-mod li.user-review{
        background-image: url('~@/assets/img/icon/review.png');
        background-size: 0.48rem 0.48rem;
    }
    .user-mod li.user-tab{
        background-image: url('~@/assets/img/icon/roles.png');
        background-size: 0.48rem 0.48rem;
    }
    .user-mod li.user-set{
        background-image: url('~@/assets/img/icon/set.png');
        background-size: 0.48rem 0.48rem;
    }
    .user-mod li.user-guide{
        background-image: url('~@/assets/img/icon/guide.png');
        background-size: 0.48rem 0.48rem;
    }
    .user-mod li.user-statistic{
        background-image: url('~@/assets/img/icon/export.png');
        background-size: 0.48rem 0.48rem;
    }
    .user-mod li.user-buybook{
        background-image: url('~@/assets/img/icon/buyBookCard.png');
        background-size: 0.48rem 0.48rem;
    }
    .user-mod li span{
        width: 0.4rem;
        height: 100%;
        background: url('~@/assets/img/icon/arrow-r.png') no-repeat 0 center;
        background-size: 0.4rem 0.4rem;
        position: absolute;
        right: 0;
        top: 0;
    }
    .btn-logout{
        width: 6.42rem;
        height: 0.86rem;
        line-height: 0.86rem;
        text-align: center;
        color: #666;
        border: 0.02rem solid #f3f5f7;
        border-radius: 0.46rem;
        font-size: 0.36rem;
        margin: 0 auto;
        box-shadow:0 0.1rem 0.2rem rgba(235,238,242,0.3);
        -webkit-box-shadow:0 0.1rem 0.2rem rgba(235,238,242,0.3);
    }
    .grade{
        border-top: 1px solid #eee;
        padding-bottom: 0.36rem;
        color: #cdd5dd;
        text-align: center;
        margin-top: 0.38rem;
    }
    .grade p{
        font-size: 0.26rem;
    }
    .grade-num{
        padding: 0.44rem 0.24rem 0.24rem;
    }
    .grade-num span{
        font-size: 0.3rem;
        font-weight: bold;
        width: 1.34rem;
        line-height: 0.24rem;
    }
    .grade-now{
        color: #02affe;
    }
    .grade .in-progress{
        width: calc(100% - 2.68rem);
        height: 0.24rem;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        background: #ebeef2;
        border-radius: 0.14rem;
        position: relative;
    }
    .grade .in-elapse{
        width: 0;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0; 
        background: #02affe;
        border-radius: 0.14rem;
    }
</style>

